<template>
<div id="p_indexindex" class="p_task">
    <group>
        <swiper loop :list="topBanner" dots-position="center" :show-desc-mask="topbanMask">
        </swiper>
        <!-- <div style="width:100%;height:180px;background: center center no-repeat;background-image: url(/static/z39h5/img/top1.jpg);background-size: cover;"></div> -->
        <div class="hl-title">热门视频  <!-- <a href="#">更多</a> --></div>
            <div class="cln hl-mg-t-10">
                <dl class="hl-pro-50" @click="onVideo(item)" :class="{'hl-mg-5':index%2==0}" v-for="(item,index) in videolistArr">
                  <dt><img :src="item.src" class="hl-img-100"><div class="hl-time"></div></dt>
                  <dd>
                    <div class="hl-dd-title">{{item.title}}</div>
                    <div class="hl-dd-content">{{item.desc}}</div>
                  </dd>
                </dl>
            </div>
            <!-- <x-button style="width: 200px;" @click.native="onChangeVideo"><span style="font-size:18px;padding-right: 8px;" class="icon iconfont icon-shuaxin"></span>换一批看看</x-button> -->
        <!-- <panel class="video" @on-click-item="onVideo" :list="list" :type="type"></panel> -->
        <!-- <panel header="热门音频" :list="soundListArr" :type="type"></panel> -->
    </group>
    <div v-transfer-dom>
      <x-dialog v-model="showTech" class="dialog-demo">
        <div class="img-box">
            <div class="page-wrapper">
                <video id="videoInd" style="width:100%; max-height:212px;" :poster="videoPoster" :src="videoUrl" controls="controls">
                  您的浏览器不支持
                </video>
            </div>
            <!-- <img src="../../../static/z39h5/img/banner5.jpg" style="max-width:100%"> -->
        </div>
        <div @click="closeTech">
          <span class="vux-close"></span>
        </div>
      </x-dialog>
    </div>
</div>
</template>
<script>
import moment from "moment";

import api from '../../api';
import axios from 'axios';
import {parseString} from 'xml2js';

// import {videolist} from '../../data/163open.js';

const baseList = [
    {
        url: '/video/0',
        img: 'https://cdns.7dtime.com/z39/index/images/banner2.jpg',
    },
    {
        url: '/suggest',
        img: 'https://cdns.7dtime.com/z39/index/images/banner6.jpg',
    }];

import {
    mapState,
    mapActions
} from 'vuex'

var techVideo ;

import {
    TransferDomDirective as TransferDom,
    XDialog,Group,Cell,Swiper,SwiperItem,GroupTitle,Sticky
} from 'vux'

export default {
    directives: {TransferDom},
    components: {
        XDialog,Group,Cell,Swiper,SwiperItem,GroupTitle,Sticky
    },
    computed: {
        ...mapState({
            uid: state => state.vux.uid
        })
    },
    watch: {

    },
    created() {
        this.initPage();
        if(localStorage.getItem("showTech")) return ;
        let showTechDay = localStorage.getItem("showTechDay") ;
        let day = moment().format('YYYY-MM-DD') ;
        if(showTechDay ==day) return ;
        localStorage.setItem("showTechDay",day);
        this.showTech = true ;
        this.videoUrl = "//cdns.7dtime.com/video/mode1.mp4" ;
        //if(isApp) this.videoUrl = "static/z39h5/mode1.mp4" ;
        this.videoPoster = "static/z39h5/img/banner5.jpg" ;
        setTimeout(()=>{
            var myVideo=document.getElementById("videoInd");
            myVideo.addEventListener('play',()=>{
                this.handlePlay();
            });
        },100)

        // document.querySelector("#vux_view_box_body").scrollTop = 0 ;
    },
    activated () {
        document.querySelector("#vux_view_box_body").scrollTop = 0 ;
    },
    mounted: function() {
    },
    methods: {
        initPage(){
            let url = "//7dtime.com/static/z39h5/data/indexVideo.xml?v=" ;
            let dev = process.env.NODE_ENV == "development" ;
            if (dev) url = "static/z39h5/data/indexVideo.xml?v="
            axios.get(url+moment().format('YYYY-MM-DD')).then(data=>{
                parseString(data.data, (err, result)=> {
                    var temp = [];
                    result.root.item.map(item=>{
                        temp.push(item.$);
                    })
                    // console.dir("result",temp);
                    this.renderVideo(temp);
                });
            })
        },
        renderVideo(videolist){
            var small = [] ;
            var len = videolist.length ;
            for(var i=0;i<= len-1 ;i++){
                var item = videolist[i] ;
                item.id = i ;
                if( i>=6){
                    small.push(item) ;
                }
            }
            this.videolistArr = videolist ;
            this.list = small ;
        },
        closeTech(){
            if(techVideo) techVideo.pause();
            document.getElementById("videoInd").pause();
            this.showTech=false
        },
        handlePlay(){
            localStorage.setItem("showTech",1);
            console.log("localStorage showTech");
        },
        onVideo(item){
            this.go(`video/${item.id}`);
            console.log("item",item.id);
        },
        ...mapActions([

        ])
    },
    data() {
        return {
            type: '5',
            list:[],
            videolistArr: [] ,
            soundListArr: [] ,
            topBanner: baseList, //首页图片banner
            topbanMask:false,
              showPopupPicker: false,
              value5: ['2'],
            timeindex: 0,
            guideHeight: "500px",
            mdcontent:'',
            showTech:false,
            videoPoster:"",
            videoUrl:"",
        }
    }
}

</script>
<style scoped>


</style>
<style>
.vux-sticky-box{
  background:#FFF;
}
.vux-tab{
  width:100%!important;
}
#p_indexVideo .weui-cells {
    margin-top: 0px;
}
#p_indexVideo .weui-panel {
    margin-top: 4px;
}

#p_indexVideo .weui-search-bar:before {
    height: 0;
    border-top: 0;
}

#p_indexVideo .video  .weui-media-box__hd{
    width: 120px;
    height: 80px;
}
#p_indexVideo .video .weui-media-box{
    padding: 8px;
}
#p_indexindex .weui-cells {
    margin-top: 0px;
}
#p_indexindex .weui-panel {
    margin-top: 4px;
}

#p_indexindex .weui-search-bar:before {
    height: 0;
    border-top: 0;
}

#p_indexindex .video  .weui-media-box__hd{
    width: 120px;
    height: 80px;
}
#p_indexindex .video .weui-media-box{
    padding: 8px;
}
.hl-title{font-size: 14px;color: #999999;  padding-left: 15px; line-height: 34px;}
    .hl-title span{ font-size: 14px; }
    .hl-title a{ float: right; margin-right: 10px; font-size: 13px; text-decoration: none; color: #999999;line-height: 2rem; display: block;}
    .hl-pro-100  dt{  position: relative;}
    .hl-pro-50{width: 49%; float: left;}
    .hl-mg-5{margin-right: 2%;}
    .hl-pro-50  dt{  position: relative; height: 114px;overflow: hidden; margin-bottom: 4px;}
    .hl-time{position: absolute; bottom: 5%; right: 5%; color: white; font-weight: normal; font-size: 12px;}
    .hl-img-100{width: 100%;    height: 100%;}
    .hl-dd-title{font-size: 13px;  padding-left: 4px;width: 100%;height: 18px;overflow: hidden;text-overflow:ellipsis;white-space:nowrap}
    .hl-dd-content{font-size: 13px;  color:#9f9f9f;padding-left: 4px;width: 100%;height: 18px;overflow: hidden;margin-bottom: 4px;text-overflow:ellipsis;white-space:nowrap}
    .hl-mg-t-10{margin-bottom:10px;}
    .cln{overflow: hidden;}
    #fresh {
    font-size: 24px;
    margin: 10px 0;
    color: #8A8A8C;

    margin-right: 2px;
    }
    .hl-button{ border: 1px #dadada solid; border-radius: 6px; padding: 3px 0; margin:auto; width: 40%; font-size: 13px; color: #8A8A8C; line-height: 2rem; background: #f7f5f9;}
    .hl-center{ text-align: center; }

</style>

<style lang="less" scoped>
@import '~vux/src/styles/close';
#p_indexindex .dialog-demo {
  .weui-dialog{
    border-radius: 8px;
    padding-bottom: 8px;
  }
  .dialog-title {
    line-height: 30px;
    color: #666;
  }
  .img-box {

    overflow: hidden;
  }
  .vux-close {
    margin-top: 8px;
    margin-bottom: 8px;
  }
}
</style>
